<template>
  <view class="my-page">
    <!-- 顶部用户信息区域 -->
    <view class="header-section">
      <!-- 签到按钮 -->
      <view class="sign-in-btn" @click="signIn">
        <text class="iconfont-v2 icon-dagou sign-icon"></text>
        <text class="sign-text">签到领积分</text>
      </view>
      
      <!-- 用户头像 -->
      <view class="avatar-container">
        <image 
          class="user-avatar" 
          :src="userInfo.avatar" 
          mode="aspectFill"
          @click="editProfile"
        />
        <view class="user-tag">{{ userInfo.tag }}</view>
      </view>
      
      <!-- 用户名 -->
      <view class="username">{{ userInfo.username }}</view>
      
      <!-- 编辑资料 -->
      <view class="edit-profile-link" @click="editProfile">
        <text>编辑资料</text>
        <text class="iconfont icon-ic_rightarrow"></text>
      </view>
    </view>

    <!-- 用户统计数据 -->
    <view class="stats-section">
      <view class="stat-item" @click="goToIncome">
        <text class="stat-number">{{ userInfo.stats.income }}</text>
        <text class="stat-label">收益</text>
      </view>
      <view class="stat-item" @click="goToPoints">
        <text class="stat-number">{{ userInfo.stats.points }}</text>
        <text class="stat-label">积分</text>
      </view>
      <view class="stat-item" @click="goToRedPackets">
        <text class="stat-number">{{ userInfo.stats.redPackets }}</text>
        <text class="stat-label">红包</text>
        <view class="red-dot" v-if="userInfo.stats.redPackets > 0"></view>
      </view>
      <view class="stat-item" @click="goToFollowing">
        <text class="stat-number">{{ userInfo.stats.following }}</text>
        <text class="stat-label">关注</text>
      </view>
    </view>

    <!-- VIP会员横幅 -->
    <view class="vip-banner" @click="upgradeVip">
      <view class="vip-left">
        <text class="iconfont-v2 icon-vip vip-icon"></text>
        <text class="vip-text">VIP会员</text>
      </view>
      <view class="upgrade-btn">
        <text>升级会员</text>
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="order-section">
      <view class="order-item" @click="goToOrders('pending')">
        <view class="order-icon">
          <text class="iconfont-v2 icon-qianbao"></text>
        </view>
        <text class="order-label">待支付</text>
      </view>
      <view class="order-item" @click="goToOrders('receiving')">
        <view class="order-icon">
          <text class="iconfont-v2 icon-kuaidi"></text>
        </view>
        <text class="order-label">待收货</text>
      </view>
      <view class="order-item" @click="goToOrders('review')">
        <view class="order-icon">
          <text class="iconfont-v2 icon-pingjia"></text>
        </view>
        <text class="order-label">待评价</text>
      </view>
      <view class="order-item" @click="goToOrders('refund')">
        <view class="order-icon">
          <text class="iconfont-v2 icon-shouhou"></text>
        </view>
        <text class="order-label">退款/售后</text>
      </view>
      <view class="order-item" @click="goToOrders('all')">
        <view class="order-icon">
          <text class="iconfont-v2 icon-dingdan"></text>
        </view>
        <text class="order-label">全部订单</text>
      </view>
    </view>

    <!-- 我的服务 -->
    <view class="services-section">
      <view class="section-title">我的服务</view>
      <view class="services-grid">
        <view 
          class="service-item" 
          v-for="(service, index) in services" 
          :key="index"
          @click="goToService(service.path)"
        >
          <view class="service-icon" :style="{ background: service.color }">
            <text class="iconfont-v2" :class="service.icon"></text>
          </view>
          <text class="service-label">{{ service.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar: 'http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg',
        username: '我饿老虎的抓子',
        tag: '学生',
        stats: {
          income: 1000,
          points: 128,
          redPackets: 879,
          following: 42
        }
      },
      services: [
        {
          name: '求职意向',
          icon: 'icon-guanwang',
          color: '#4A90E2',
          path: '/pages/fast/job-intention'
        },
        {
          name: '我的收藏',
          icon: 'icon-shoucang1',
          color: '#ED6567',
          path: '/pages/fast/my-favorites'
        },
        {
          name: '我的二手',
          icon: 'icon-wenjian',
          color: '#FFB800',
          path: '/pages/fast/my-secondhand'
        },
        {
          name: '我的报名',
          icon: 'icon-baoming',
          color: '#52C41A',
          path: '/pages/fast/my-registrations'
        },
        {
          name: '我的培训',
          icon: 'icon-peixun',
          color: '#1890FF',
          path: '/pages/fast/my-training'
        },
        {
          name: '健康证',
          icon: 'icon-woshou',
          color: '#722ED1',
          path: '/pages/fast/health-certificate'
        },
        {
          name: '我的论文',
          icon: 'icon-lunwen',
          color: '#ED6567',
          path: '/pages/fast/my-papers'
        },
        {
          name: '联系客服',
          icon: 'icon-kefu',
          color: '#1890FF',
          path: '/pages/fast/customer-service'
        },
        {
          name: '我的设置',
          icon: 'icon-shezhi',
          color: '#52C41A',
          path: '/pages/fast/settings'
        }
      ]
    }
  },
  methods: {
    // 签到
    signIn() {
      uni.showToast({
        title: '签到成功！获得10积分',
        icon: 'success'
      });
    },
    
    // 编辑资料
    editProfile() {
      uni.navigateTo({
        url: '/pages/fast/edit-profile'
      });
    },
    
    // 升级VIP
    upgradeVip() {
      uni.navigateTo({
        url: '/pages/fast/vip-upgrade'
      });
    },
    
    // 跳转到收益
    goToIncome() {
      uni.navigateTo({
        url: '/pages/fast/my-income'
      });
    },
    
    // 跳转到积分
    goToPoints() {
      uni.navigateTo({
        url: '/pages/fast/my-points'
      });
    },
    
    // 跳转到红包
    goToRedPackets() {
      uni.navigateTo({
        url: '/pages/fast/my-redpackets'
      });
    },
    
    // 跳转到关注
    goToFollowing() {
      uni.navigateTo({
        url: '/pages/fast/my-following'
      });
    },
    
    // 跳转到订单
    goToOrders(type) {
      uni.navigateTo({
        url: `/pages/fast/order-list?type=${type}`
      });
    },
    
    // 跳转到服务
    goToService(path) {
      uni.navigateTo({
        url: path,
        fail: () => {
          uni.showToast({
            title: '功能开发中...',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.my-page {
  min-height: 100vh;
  background: #f5f5f5;
}

// 顶部用户信息区域
.header-section {
  background: white;
  padding: 60rpx 40rpx 40rpx;
  position: relative;
  text-align: center;
  
  .sign-in-btn {
    position: absolute;
    top: 40rpx;
    right: 40rpx;
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding: 12rpx 24rpx;
    background: #FFD700;
    border-radius: 40rpx;
    font-size: 24rpx;
    color: #333;
    
    .sign-icon {
      font-size: 24rpx;
      color: #333;
    }
    
    .sign-text {
      font-size: 24rpx;
      font-weight: 500;
    }
  }
  
  .avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 24rpx;
    
    .user-avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      border: 4rpx solid #f0f0f0;
    }
    
    .user-tag {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 4rpx 16rpx;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 20rpx;
      border-radius: 20rpx;
      border: 2rpx solid white;
    }
  }
  
  .username {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .edit-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 8rpx;
    font-size: 26rpx;
    color: #999;
    
    .iconfont {
      font-size: 20rpx;
    }
  }
}

// 用户统计数据
.stats-section {
  background: white;
  padding: 40rpx 0;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20rpx;
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    
    .stat-number {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .stat-label {
      font-size: 24rpx;
      color: #666;
    }
    
    .red-dot {
      position: absolute;
      top: -8rpx;
      right: -8rpx;
      width: 16rpx;
      height: 16rpx;
      background: #FF6B00;
      border-radius: 50%;
      border: 2rpx solid white;
    }
  }
}

// VIP会员横幅
.vip-banner {
  background: linear-gradient(135deg, #ED6567 0%, #d55a54 100%);
  margin: 0 40rpx 20rpx;
  padding: 30rpx 40rpx;
  border-radius: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .vip-left {
    display: flex;
    align-items: center;
    gap: 16rpx;
    
    .vip-icon {
      font-size: 40rpx;
      color: #FFD700;
    }
    
    .vip-text {
      font-size: 32rpx;
      font-weight: 600;
      color: white;
    }
  }
  
  .upgrade-btn {
    padding: 12rpx 32rpx;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 40rpx;
    font-size: 26rpx;
    color: white;
    font-weight: 500;
  }
}

// 订单状态
.order-section {
  background: white;
  padding: 40rpx 0;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-around;
  
  .order-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12rpx;
    
    .order-icon {
      width: 80rpx;
      height: 80rpx;
      background: #f8f9fa;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont-v2 {
        font-size: 36rpx;
        color: #ED6567;
      }
    }
    
    .order-label {
      font-size: 24rpx;
      color: #666;
    }
  }
}

// 我的服务
.services-section {
  background: white;
  padding: 40rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30rpx 20rpx;
    
    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      
      .service-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .iconfont-v2 {
          font-size: 40rpx;
          color: white;
        }
      }
      
      .service-label {
        font-size: 24rpx;
        color: #666;
        text-align: center;
      }
      
      // 第二行只有4个，居中显示
      &:nth-child(6) {
        grid-column: 1;
      }
      &:nth-child(7) {
        grid-column: 2;
      }
      &:nth-child(8) {
        grid-column: 3;
      }
      &:nth-child(9) {
        grid-column: 4;
      }
    }
  }
}
</style>

